<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div1 {
                width: 200px;
                height: 200px;
                background: #ccc;
                margin: 100px;
                position: relative; /*div2的相对定位依赖于此处的绝对定位*/
            }

            #div2 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 50px;
                top: 50px;
            }

            #div3 {
                width: 100px;
                height: 100px;
                background: goldenrod;
                position: absolute;
            }
        </style>
    </head>
    <body style="height: 1000px;">
        <div id='div1'>
            <div id="div2"></div>
        </div>
        <hr/>
        <div id="div3"></div>
    </body>
</html>
<script src="js/common.js"></script>
<script>
    window.onload = function () {
        document.onclick = function () {
            //鼠标所在的坐标-->> 都是可视区的坐标
            alert(event.clientX + "," + event.clientY);
        };
        //警告 但凡使用clentX , clientY 的时候都需要加上scrollTop
        document.onmousemove = function (ev) {
            var oEvent = ev || event;
            var div3 = document.getElementById("div3");
            var pos = getPosition(oEvent);
            div3.style.left = pos.x + "px";
            div3.style.top = pos.y + "px";
        }
    }
</script>